<template>
	<view class="p32">
		<view class="" v-if="cartsList.length">
			<view class="" v-for="item in address">
				<view class="flex justify-between items-center" v-if="item.is_default === 1" @click="selectAddress">
					<view class="">
						<view class="">{{item.name}} {{item.phone}}</view>
						<view class="">{{item.province}} {{item.city}} {{item.county}} {{item.address}}</view>
					</view>
					<view class="">
						<u-icon name="arrow-right"></u-icon>
					</view>
				</view>
			</view>
			<view class="flex p32" v-for="(item, index) in cartsList" :key="item.id">
				<view class="">
					<image :src="item.goods.cover_url" mode="aspectFill" style="width: 230rpx;height: 200rpx;"></image>
				</view>
				<view class="flex flex-col carts-right">
					<view class="">
						<view class="">{{item.goods.title}}</view>
					</view>
					<view class="flex items-center">
						<view class="color-f00 mr12">￥{{item.goods.price}}</view>
            <view class="">x{{item.num}}</view>
					</view>
				</view>
			</view>
			<view class="flex fixed_bottom">
        <view class="ml12">合计￥</view>
				<view class="btn-primary btn-account">提交订单并支付</view>
			</view>
		</view>
		<view class="" v-else >
			<u-empty
				mode="car"
				icon="http://cdn.uviewui.com/uview/empty/car.png"
			>
			</u-empty>
		</view>
	</view>
</template>

<script>
import { ordersPreview } from '@/config/api'
	export default {
		data() {
			return {
				cartsList: [],
        address: []
			}
		},
		onLoad() {
			this.getCartsPreview() 
		},
		methods: {
			/**
			 * 选择地址
			 */
			selectAddress() {
				this.$u.route({
					url: 'pages/address/index'
				})
			},
			/**
		 * 获取订单预览数据
		 */
			async getCartsPreview() {
				if(this.$u.utils.isLogin()) {
					const res = await ordersPreview()
					this.cartsList = res.carts
					this.address = res.address
				}
			},
		}
	}
</script>

<style lang="scss" scoped>
.fixed_bottom {
	box-sizing: border-box;
	position: fixed;
	bottom: 0;
	left: 0;right: 0;
	width: 100%;
	height: 90rpx;
	padding: 0 32rpx;
	z-index: 2;
	border-top: 1px solid #ddd;

	justify-content: space-between;
	align-items: center;
	background-color: #fff;
}
.btn-account {
  
}
.carts-right {
	height: 200rpx;
	justify-content: space-around;
}
</style>
